import React, { Component } from 'react'
import { Form, Input, Button, Checkbox ,message} from 'antd';
import './login.css'
import {getUser} from '../../api/login'
import { connect } from 'react-redux';
import { setStroage } from '../../utils/stroage';

 class Login extends Component {
    render() {
        const {dispatch}=this.props
        console.log('this.props',this.props);
        const Demo = () => {
            const onFinish =async (values) => {
                console.log('输入的数据:', values);
                const res= await getUser(values)
                console.log(res);
                
                if (res.code) {
                    message.success('登录成功');
                    localStorage.token=res.data.token
                    // localStorage.userInfo=JSON.stringify(res.data.userInfo)

                    // 封装
                    setStroage('userInfo',res.data.userInfo)
                    this.props.history.push('/home')
                }else{
                    message.warning('登录失败');
                }
            };

            const onFinishFailed = (errorInfo) => {
                console.log('Failed:', errorInfo);
            };

            return (
                <>
                    <h1>登录</h1>
                    <Form
                        name="basic"
                        labelCol={{
                            span:5,
                        }}
                        wrapperCol={{
                            span: 16,
                        }}
                        initialValues={{
                            remember: true,
                        }}
                        onFinish={onFinish}
                        onFinishFailed={onFinishFailed}
                        autoComplete="off"
                    >
                        <Form.Item
                            label="账号"
                            name="account"
                            rules={[
                                {
                                    required: true,
                                    message: 'Please input your username!',
                                },
                            ]}
                        >
                            <Input />
                        </Form.Item>

                        <Form.Item
                            label="密码"
                            name="password"
                            rules={[
                                {
                                    required: true,
                                    message: 'Please input your password!',
                                },
                            ]}
                        >
                            <Input.Password />
                        </Form.Item>

                        <Form.Item
                            name="remember"
                            valuePropName="checked"
                            wrapperCol={{
                                offset: 8,
                                span: 16,
                            }}
                        >
                            <Checkbox>记住我</Checkbox>
                        </Form.Item>

                        <Form.Item
                            wrapperCol={{
                                offset: 8,
                                span: 16,
                            }}
                        >
                            <Button type="primary" htmlType="submit">
                                登录
                            </Button>
                        </Form.Item>
                    </Form>
                </>
            );
        };
        return (
            <div className='loginContent'>
                <div className='inputBox'>
                    <Demo />
                </div>

            </div>
        )
    }
}
const mapStateToProps = (state) => {
    console.log(state);
    return{}
}
export default connect(mapStateToProps)(Login)